<template>
	<json-editor-vue ref="jsonEditorRef" class="editor" v-model="modelValue" language="zh" />
</template>
<script setup lang="ts">
import JsonEditorVue from 'json-editor-vue3'
import { useVmodel } from '@/hooks/useVmodel'
import { ref } from 'vue'
defineEmits(['update:modelValue'])
const props = withDefaults(
	defineProps<{
		modelValue?: any
	}>(),
	{
		modelValue: ''
	}
)
// vmodel
const modelValue = useVmodel<Record<string, any>>(props)
const jsonEditorRef = ref()
defineExpose({
	getJsonEditorRef() {
		return jsonEditorRef.value
	},
	// 是否存在异常
	hasError() {
		const errors = jsonEditorRef.value.editor.lastSchemaErrors
		return errors && errors.length
	}
})
</script>

<style scoped lang="scss">
:deep(.json-editor-vue) {
	.jsoneditor {
		color: $text-color-primary;
		border: thin solid $border-color;
		.jsoneditor-search input {
			background-color: initial;
		}

		// .ace_gutter {
		// 	color: $text-color-primary;
		// 	background: var(--el-fill-color);
		// }
		// .ace_scroller {
		// 	background-color: var(--el-fill-color);
		// 	.ace_text-layer {
		// 		color: $text-color-primary;
		// 	}
		// }
	}
	.jsoneditor-menu > .jsoneditor-modes > button,
	.jsoneditor-menu > button {
		color: initial;
	}
	.jsoneditor-menu {
		color: initial;
		background-color: $color-primary;
		border-bottom: 1px solid $border-color;
	}
	.jsoneditor-statusbar {
		color: initial;
		background-color: var(--el-fill-color);
		border-top: 1px solid $border-color;
	}
	.full-screen {
		right: 10px;
	}
	.jsoneditor-poweredBy {
		display: none;
	}
}
</style>
